<template>
    <!-- 添加 / 编辑窗口 -->
    <el-dialog :visible="addOrEditVisible"
               @close="onDialogClose"
               @closed="onClosed"
               :title="dialogInfo.title"
               :width="dialogInfo.width"
               destroy-on-close
               :close-on-click-modal="false"
    >
        <app-dialog-component
            :dialog-info="dialogInfo"
            :dialog-data="dialogData"
            :form-items="formItems"
            @change="onChangeValue"
            @success="onSuccess"
            @close="onDialogClose"
        />
    </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AppDialogComponent from '@/components/app-dialog/component.vue';
import { DialogConfig, DialogFormItem, DialogModule } from '@/store/dialog';

@Component({
    name: 'AppDialog',
    components: { AppDialogComponent },
})
export default class AppDialog extends Vue {

    // 窗口信息
    get dialogInfo(): DialogConfig {
        return DialogModule.info;
    }

    // 表单数据
    get dialogData(): any {
        return DialogModule.data;
    }

    get formItems(): DialogFormItem[] {
        return DialogModule.form;
    }

    // 窗口是否显示
    get addOrEditVisible(): boolean {
        return DialogModule.visible;
    }

    // 值修改
    onChangeValue(item: any, value: any) {
        this.dialogData[item.prop] = value;
        DialogModule.setValue({
            key: item.prop,
            value: value
        });
    }

    // 提交完成
    onSuccess(data: any) {
        DialogModule.callback(data);
    }

    // 窗口关闭
    onDialogClose() {
        DialogModule.close();
    }

    // 窗体彻底关闭
    onClosed() {
        DialogModule.dispose();
    }
}
</script>

<style scoped lang="scss">
.k-form {
    /deep/ .el-form-item__content {
        position: relative;
    }
}
.k-input-hidden {
    position: absolute;
    bottom: 0;
    opacity: 0;
}
</style>
